<template>
  <nav class="navbar">
    <ul class="navbar-tabs">
      <li v-for="tab in tabs" :key="tab.name">
        <RouterLink :to="tab.path" class="navbar-tab" :class="{ active: tab.isActive }">
          {{ tab.name }}
        </RouterLink>
      </li>
    </ul>
    <div class="navbar-search">
      <button class="search-button" @click="goToSearch">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </svg>
      </button>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { RouterLink, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter(); // 引入路由器

const tabs = ref([
  { name: '发现', path: '/discover', isActive: false },
  { name: '频道', path: '/channels', isActive: false },
  { name: '我的', path: '/profile', isActive: false }
]);

onMounted(() => {
  tabs.value.forEach(tab => {
    tab.isActive = tab.path === route.path;
  });
});

// 跳转到搜索页面
const goToSearch = () => {
  router.push('/search');
};
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
  padding: 0 1rem;
  z-index: 1000; /* 确保导航栏在其他内容之上 */
}

.navbar-tabs {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 使标签布局更加均匀 */
  justify-content: space-around; /* 或者使用 space-between */
  flex: 1; /* 占据可用空间 */
}

.navbar-tab {
  color: #fff;
  text-decoration: none;
  padding: 1rem;
}

.navbar-tab.active {
  border-bottom: 2px solid #fff;
}

.navbar-search {
  display: flex;
  align-items: center;
}

.search-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  /* 添加一些内边距使按钮更明显 */
  padding: 0.5rem;
}

.search-button svg {
  width: 24px;
  height: 24px;
  fill: #fff; /* 确保 SVG 图标为白色 */
}
</style>